{% extends "base.html" %}

{% block title %}登录 - cr文档管理系统{% endblock %}

{% block head %}
<style>
    .login-container {
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        animation: gradientBG 15s ease infinite;
        background-size: 400% 400%;
    }
    
    @keyframes gradientBG {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    .login-box {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border-radius: 1rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: translateY(0);
        transition: all 0.3s ease;
    }
    
    .login-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.2);
    }
    
    .input-group {
        position: relative;
        margin-bottom: 1.5rem;
    }
    
    .input-group input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        outline: none;
        transition: all 0.3s ease;
    }
    
    .input-group input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .login-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        border: none;
        width: 100%;
        cursor: pointer;
    }
    
    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .alert {
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        animation: slideIn 0.3s ease;
    }
    
    @keyframes slideIn {
        from { transform: translateY(-10px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .system-title {
        color: #2d3748;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        letter-spacing: 1px;
    }

    .login-hint {
        color: #718096;
        font-size: 0.875rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container flex items-center justify-center p-4">
    <div class="login-box w-full max-w-md p-8 space-y-6">
        <div class="text-center">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">cr文档管理系统</h1>
            <p class="text-gray-600">请输入管理员密码登录</p>
        </div>
        
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert bg-red-100 border-l-4 border-red-500 text-red-700">
                        <div class="flex items-center">
                            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            {{ message }}
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <form action="{{ url_for('auth.login') }}" method="POST" class="space-y-6">
            <div class="input-group">
                <input id="password" name="password" type="password" required
                       class="focus:ring-2 focus:ring-blue-500"
                       placeholder="请输入密码">
            </div>
            
            <button type="submit" class="login-btn">
                登录系统
            </button>
        </form>
        
        <div class="text-center text-sm text-gray-600 mt-4">
            <p>默认密码: admin123</p>
            <p class="mt-2">建议登录后立即修改密码</p>
        </div>
    </div>
</div>
{% endblock %} 